<template>
  <el-row :gutter="20">
    <el-col :span="18" :xs="24">
      <!-- 列表 -->
      <ContentWrap class="mt-10px">
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column label="产品名称" min-width="180">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.energyId`" class="mb-0px!">
                <el-select
                  v-model="row.energyId"
                  clearable
                  disabled
                  filterable
                  placeholder="请选择产品"
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="单位" min-width="80">
            <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.energyUnitId" />
            </template>
          </el-table-column>
          <el-table-column label="报装月用量" prop="count" fixed="right" min-width="120">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.count`" class="mb-0px!">
                <el-input-number
                  v-model="row.count"
                  controls-position="right"
                  :min="0.001"
                  disabled
                  :precision="3"
                  class="!w-100%"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="变压器类型" min-width="80">
            <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_TRANSFORMER_TYPE" :value="row.transformerId" />
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
    </el-col>
    <!-- 右侧操作日志 -->
    <el-col :span="6" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>
  
</template>
<script lang="ts" setup>
import { ProjectApi,ProjectVO } from '@/api/crm/project'
import { DICT_TYPE } from '@/utils/dict'
import * as ProductApi from '@/api/crm/product'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'ProjectEnergyDetail' })
const { project } = defineProps<{
  project: ProjectVO // 项目主表
}>()

const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => project.id,
  async (val) => {
    if (!val) {
      loading.value = false
      return;
    }
    try {
      loading.value = true
      list.value = await ProjectApi.getProjectEnergyListByProjectId(val)
      await getOperateLog()
    } finally {
      loading.value = false
    }
  },
  { immediate: true }
)

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!project.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_PROJECT_ENERGY,
    bizId: project.id
  })
  logList.value = data.list
}

/** 初始化 */
onMounted(async () => {
  productList.value = await ProductApi.getProductSimpleList()
})
</script>
